<template>
	<div>
		<topbar :title="title"></topbar>
		<section class="login-view">
			<div>
				<div class="login-inp">
					<input type="text" placeholder="输入手机号/邮箱" v-model="username"  />
					<div class="input-bg"></div>
				</div>
				<div class="login-inp">
					<input type="password" placeholder="输入密码/验证码" v-model="userpwd"/>
					<div class="input-bg"></div>
				</div>
				<div class="center-block">
					<button class="submit" type="submit" @click="login">登录</button>
				</div>
			</div>
		</section>
	</div>
	
</template>
<script>
	import topbar from './../home/topbar.vue';
	import $ from 'jquery';
	export default{
		data:function() {
			return {
				title:'登录',
				username:'',
				userpwd:''
			}
		},
		methods:{
			//http://localhost:3000/users/login/?username=111&userpwd=111
			login:function() {
				var url = 'http://localhost:3000/users/login/?username='+this.username+'&userpwd='+this.userpwd;
				$.get(url,function(res) {
					console.log(res)
					if (res && res.code==0) {
						//登录成功
						alert('登录成功')
					} else {
						//登录失败
						alert('登录失败')
					}
				})
			}
		},
		components:{
			topbar:topbar
		}
	}
</script>
<style scoped>
	.login-view{
		position: relative;
	    height: 100%;
	    width: 100%;
	    background-color: #f6f6f6;
	}
	.login-view>div{
		padding: 0px 31px 0px 31px;
	}
	.login-inp{
		margin: 30px 0 0;
    	position: relative;
	}
	.login-view input{
		display: block;
	    width: 100%;
	    height: 34px;
	    padding: 6px 12px;
	    font-size: 14px;
	    line-height: 1.42857143;
	    color: #555;
	    background-color: #f6f6f6;
	    border: none;
	    border-radius: 0px;
	    box-shadow: none;
	    outline: none;
	}
	.input-bg{
		position: absolute;
	    top: 20px;
	    height: 12px;
	    width: 100%;
	    border: solid #c4c4c4;
	    border-width: 0 1px 1px 1px;
	}
	.center-block{
		text-align:center;
	}
	.login-view .submit{
		width: 163px;
	    background-color: #fe8233;
	    color: #fff;
	    border: none;
	    border-radius: 36px;
	    margin:45px auto;
	    padding: 8px 12px;
	    font-size: 15px;
	    outline: none;
	}
</style>